import {
	modal
} from 'vue-strap'
import {
	showMsg,
	addHkGroup,
	getInvesterList,
	getOriginList
} from '../../../../../vuex/action.js'

export default {
	data() {
		return {
			serverRoot: server.root,
			showSelectBetaIdModal: false,
      showAddInvesterModal: false,
			addGroup: {
				id: '', //投顾组合id
				name: '', //组合名称
				descr: '', //组合描述
				type: this.payType, // 类型，1-华林 2-港股
				labels: '', //标签
				betaType: '', //组合类型
				proDesc: '', //产品介绍
				prospect: '', //产品特性
				riskLevel: this.payType === 1 ? '保守型' : '', //风险等级 0=保守 1=稳健 2=积极
				file: '', //组合封面
				investerId: '', //投顾人id
				isNew: 0, //是否new
				isHomepage: 0, //是否首页展示
				isBuyAllow: 0, //是否允许一键买入
				isTransferAllow: 0, //是否允许一键调仓
				isCoorp: 0, //是否显示合作方
				status: 0 //上架状态
			},
			investerList: [],
			betaList: [],
			currentBeta: '',
			betaName: '',
			timeId: ''
		}
	},
	computed: {
		currentInvester() {
			let currentInvester = ''
			this.investerList.forEach((item) => {
        if (!this.addGroup.investerId) {
          this.addGroup.investerId = item.id
        }
				if (+item.id === +this.addGroup.investerId) {
					currentInvester = item
				}
			})
			return currentInvester
		}
	},
	watch: {
		currentBeta(newVal) {
			if (newVal) {
        this.addGroup.id = newVal.id
        this.addGroup.name = newVal.name
			}
		}
	},
	methods: {
		trim(str) {
      if (typeof str === 'string') {
        return str.replace(/(^ +)|( +$)/g, '')
      }
      return str
		},
		validCheck() {
			let file = this.$els.groupImage.files[0]
      let inputs = ['id', 'name', 'descr', 'betaType', 'proDesc', 'investerId']
      let key
      let addGroup = this.addGroup
      for (key of inputs) {
        if (!addGroup[key] || addGroup[key].length === 0 || !file) {
          return '* 标记的都为必填项'
        }
      }
		},
		addInvesterInfo() {
			let validMsg = this.validCheck()
			if (validMsg) {
				return this.xShowMsg({
					type: 'danger',
					content: validMsg
				})
			}

			let formData = new FormData()
			Object.keys(this.addGroup).forEach((key) => {
				if (key === 'file') {
					formData.append('file', this.$els.groupImage.files[0])
				} else {
					formData.append(key, this.trim(this.addGroup[key]))
				}
			})

			this.xAddHkGroup(formData)
				.then(() => {
          this.resetModal()
					this.showAddInvesterModal = false
					this.$dispatch('on_refresh_list')
				})
				.catch((res) => {
					this.xShowMsg({
						type: 'danger',
						content: res.error_msg
					})
				})
		},
		selectBetaId(currentBeta) {
			this.currentBeta = currentBeta
      this.betaList.forEach((item) => {
        item.isSelected = false
      })
      currentBeta.isSelected = true
		},
    goSelectBetaId() {
      this.showSelectBetaIdModal = true
			this.showAddInvesterModal = false
    },
    goAddInvester() {
      this.showSelectBetaIdModal = false
			this.showAddInvesterModal = true
    },
    goCancel() {
      this.showSelectBetaIdModal = false
			this.showAddInvesterModal = false
    },
    resetModal() {
      this.$els.addForm.reset()
      this.betaName = ''
      this.betaList = []
    },
		getInvesterList() {
			this.xGetInvesterList({
				start: 0,
				limit: 9999
			}).then((res) => {
				this.investerList = res.data.list
			}).catch((res) => {
				this.xShowMsg({
					type: 'danger',
					content: res.error_msg
				})
			})
		},
		searchBetaList() {
			window.clearTimeout(this.timeId)
			this.timeId = setTimeout(() => {
				this.getOriginList()
			}, 1000)
		},
		getOriginList() {
      if (!this.betaName) {
        return this.xShowMsg({
					type: 'danger',
					content: '请输入组合名称后进行搜索'
				})
      }
			this.xGetOriginList({
				name: this.betaName,
				start: 0,
				limit: 100
			}).then((res) => {
        this.betaList = res.data.list.map((item) => {
          item.isSelected = false
          return item
        })
			}).catch((res) => {
				this.xShowMsg({
					type: 'danger',
					content: res.error_msg
				})
			})
		}
	},
	components: {
		modal: modal
	},
	vuex: {
		actions: {
			xShowMsg: showMsg,
			xAddHkGroup: addHkGroup,
			xGetInvesterList: getInvesterList,
			xGetOriginList: getOriginList
		},
    getters: {
      payType: state => state.payType
    }
	},
	ready() {
		this.getInvesterList()
	}
}
